<template>
  <el-form label-width="100px" :model="setting">
    <el-form-item :label="uiText.language ? uiText.language : '语言'">
      <el-select
        v-model="setting.language"
        :placeholder="uiText.language ? uiText.language : '语言'"
        @change="languageChange"
      >
        <el-option v-for="item in languageOptions" :key="item.name" :label="item.name" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="uiText.theme ? uiText.theme : '主题'">
      <el-select v-model="setting.theme" :placeholder="uiText.theme ? uiText.theme : '主题'" @change="themeChange">
        <el-option v-for="item in themeOptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  computed: {
    uiText() {
      return this.$store.state.uiText.setting;
    },
  },
  data() {
    return {
      setting: {
        language: this.$store.state.language,
        theme: this.$store.state.theme,
      },
      languageOptions: require("../../language/option.js").default,
      themeOptions: require("../../styles/themeOption").default,
    };
  },
  methods: {
    languageChange(value) {
      this.$store.commit("language", value);
    },
    themeChange(value) {
      this.$store.commit("theme", value);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  box-sizing: border-box;

  overflow: auto;
  .el-form-item:last-child{
    margin-bottom: 0;
  }
}
</style>
